<template>
  <div id="app">
    <v-header :seller="seller" :classMap="classMap"></v-header>
    <div class="tab">
        <div class="tab-item">
            <router-link :to="{ path: '/goods' }">商品</router-link>
        </div>
        <div class="tab-item">
            <router-link :to="{ path: 'retings'}">评论</router-link>
        </div>
        <div  class="tab-item">
            <router-link :to="{ path: '/seller'}">商家</router-link>
        </div>
    </div>
    <div class="content main">
            <router-view></router-view>
    </div>
  </div>
</template>

<script>
import header1 from './components/header/header.vue'
export default {
    components: {
        'v-header': header1
    },
    data(){
        return {
            seller: {},
            classMap: {}
        }
    },
    name: 'App',
    methods: {
        route: function (path) {
            this.$router.push(path)
            // this.bread= this.$router.history.current.name
            // console.log(this.$router.history)
            // this.$router.options.routes[1].hidden=!this.$router.options.routes[1].hidden;
        }
    },
    created(){
        this.$http.get('/api/index/Index/getShopInfo').then((response) => {
            if (response.body.status === 'success'){
                this.seller = response.body.data
                console.log(this.seller)
            }
        }) , 
        this.classMap= ['discount', 'invoice', 'guarantee', 'decrease', 'special']
    }

}

</script>
<style lang="stylus" rel="stylesheet/stylus">
    @import "./common/stylus/base.styl";
    @import "./common/stylus/mixin.styl";
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;

}
    #app .main{
        text-align: center;
    }
.header1{
    height: 130px;
    border:1px red solid;
    background: #ddd;
    color: #fff;
}
    #app
        .tab
            display: flex
            width: 100%
            height: 40px
            border-1px(rgba(7, 17, 27, 0.1))
            .tab-item
                flex: 1
                text-align: center
                & > a
                    display: block
                    font-size: 14px
                    color: rgb(77, 85, 93)
                    &.active
                        color: rgb(240,20,20)

</style>
